<template>
  <div class="container">
    <div class="canvas">
      <iframe
        frameborder="0"
        :src="htmlSrc"
        style="width: 100%; height: 100%"
      ></iframe>
    </div>
    <div class="header">
      <h1>
        大数据可视化展板通用模板
        <span>{{ timeShow }}</span>
      </h1>
    </div>
    <div class="body">
      <div class="left">
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle"></div>
          <div
            class="allnav"
            id="echart1"
            style="position: relative; height: 3rem; width: 5rem"
          ></div>
          <div class="boxfoot"></div>
        </div>
      </div>
      <div class="center boxall"></div>
      <div class="right boxall"></div>
    </div>
  </div>
  <BackButton />
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import * as echarts from "echarts";
import BackButton from "../components/backButton/index.vue";
@Options({
  components: {
    BackButton
  }
})
export default class SmartCity extends Vue {
  private timeNow!: number;

  private timeShow!: string;

  data() {
    return {
      timeShow: 0,
      timeNow: 0
    };
  }

  private htmlSrc = "static/bg.html";
  mounted() {
    const wid = document.body.clientWidth;
    const html = document.getElementsByTagName("html")[0];
    html.style.fontSize = wid / 20 + "px";
    window.onresize = function() {
      const wid = document.body.clientWidth;
      const html = document.getElementsByTagName("html")[0];
      html.style.fontSize = wid / 20 + "px";
    };
    this.timeNow = setTimeout(() => {
      this.time();
    }, 1000);
    this.echarts1();
    // this.time();
  }

  echarts1() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(
      document.getElementById("echart1") as HTMLCanvasElement
    );

    const option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "商超门店",
            "教育培训",
            "房地产",
            "生活服务",
            "汽车销售",
            "旅游酒店",
            "五金建材"
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            }
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 50, // 斜向显示
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }
      ],
      series: [
        {
          type: "bar",
          data: [200, 300, 300, 900, 1500, 1200, 600],
          barWidth: "35%", //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: "#2f89cf",
              opacity: 1,
              barBorderRadius: 5
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  }

  time() {
    clearTimeout(this.timeNow);
    const dt = new Date();
    const y = dt.getFullYear();
    const mt = dt.getMonth() + 1;
    const day = dt.getDate();
    const h = dt.getHours(); //获取时
    const m = dt.getMinutes(); //获取分
    const s = dt.getSeconds(); //获取秒
    this.timeShow =
      y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";

    this.timeNow = setTimeout(() => {
      this.time();
    }, 1000);
  }
}
</script>
<style scoped>
body {
  background: #000d4a url(../assets/smartCity/bg.jpg) center top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
}

body {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: "微软雅黑";
}
.container {
  width: 100%;
  height: calc(100vh - 140px);
}
.header {
  height: 1.05rem;
  background: url(../assets/smartCity/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  z-index: 100;
  margin-top: 0;
}
.header h1 {
  color: #fff;
  text-align: center;
  font-size: 0.4rem;
  line-height: 0.8rem;
  margin: 0;
}
.body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.left {
  width: 30%;
  height: 9.6rem;
  margin: 0.1rem;
}
.center {
  width: 40%;
  margin: 0.1rem;
  height: 9.6rem;
}
.right {
  width: 30%;
  height: 9.6rem;
  margin: 0.1rem;
}
.canvas {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 99%;
  z-index: 1;
  opacity: 0.2;
}

span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.18rem;

  float: right;
  /* margin-top: -0.2rem; */
}
.boxall {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  /* background: rgba(255, 255, 255, 0.04) url(../images/line.png); */
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}
.boxall:before,
.boxall:after {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}
.boxall:before,
.boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}
.boxall:after,
.boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
.alltitle {
  font-size: 0.2rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
}

.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}
.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.bar {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.15rem;
}
.barbox li,
.barbox2 li {
  width: 50%;
  text-align: center;
  position: relative;
  z-index: 100;
}
.barbox:before,
.barbox:after {
  position: absolute;
  width: 0.3rem;
  height: 0.1rem;
  content: "";
}
.barbox:before {
  border-left: 2px solid #02a6b5;
  left: 0;
  border-top: 2px solid #02a6b5;
}
.barbox:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #02a6b5;
}

.barbox li:first-child:before {
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.barbox {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
}
.barbox li {
  font-size: 0.7rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}
.barbox2 li {
  font-size: 0.19rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.1rem;
}
</style>
